<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <link rel="shortcut icon" href="favicon.ico"/>
    <title>演示 - jQuery EasyUI 1.5.x Of Insdep theme examples</title>
    <%include("/include/header.html"){} %>
</head>

<body class="theme-login-layout">

<div class="theme-login-header"></div>
<div id="theme-login-form">
    <div class="QRcode"></div>
    <div class="QRcode-layout hide">
        <div class="QRcode-layout-close"></div>
        <div class="QRcode-header">
            <b>请使用手机端扫码登录</b>
            <span>很显然，现在的图片只能看😀</span>
        </div>
        <div class="QRcode-content"><img src="${ctxPath}/static/images/logo.png" width="215"></div>
    </div>
    <form id="form" class="theme-login-form" method="post">
        <dl>
            <dt><img src="${ctxPath}/static/images/logo.png"></dt>

            <dd>
                <select id="theme-login-select" class="theme-login-select" style="width:100%;">
                    <option value="0">请选择用户类型</option>
                    <option value="1">系统管理员</option>
                    <option value="2">普通用户</option>
                </select>
            </dd>
            <dd><input id="username" name="username" class="theme-login-text" style="width:100%;"/></dd>
            <dd><input id="password" name="password" class="theme-login-text" style="width:100%;"/></dd>
            <dd>
                <input type="hidden" name="ctoken" value="${ctoken}">
                <input type="text" id="captcha" name="captcha" class="theme-login-text" style="width: 300px;" placeholder="验证码" required="">
            </dd>
            <dd><a class="submit" onclick="login();">登  录</a><a class="easyui-linkbutton button" href="index.html">忘记密码
                ?</a></dd>

        </dl>
    </form>
</div>

<div class="theme-login-footer">
    <dl>
        <dt><a>平台介绍</a> | <a>帮助手册</a> | <a>联系我们</a></dt>
        <dd>&copy 2008 -
            <script>var year = new Date();
            document.write(year.getFullYear());</script>
            二十一世纪空间技术应用股份有限公司.版权所有
        </dd>
    </dl>
</div>

<script>

    $(function () {

        $(".QRcode").on("click", function () {
            $(".QRcode-layout").removeClass("hide");

        });
        $(".QRcode-layout-close").on("click", function () {
            $(".QRcode-layout").addClass("hide");
        });

        $.extend($.fn.validatebox.defaults.tipOptions, {
            onShow: function () {
                $(this).tooltip("tip").css({backgroundColor: "#ff7e00", border: "none", color: "#fff"});

            }
        })

        /*布局部分*/
        $('#theme-login-layout').layout({
            fit: true/*布局框架全屏*/
        });

        /*表单定义*/
        $('#theme-login-select').combobox({
            /*通过ajax取数据
             url:'userclass.json',
             valueField:'id',
             textField:'text'
             */
            editable: false /*不允许用户通过输入选择*/

        });
        var selects = $('#theme-login-select').combobox('panel');
        selects.panel({cls: "theme-login-select-panel"});

        $('#username').textbox({
            prompt: '请输入用户名',
            required: true,
            missingMessage: "请输入用户名"
        });
        $('#password').textbox({
            type: "password",
            prompt: '请输入密码',
            required: true,
            missingMessage: "请输入密码"
        });

        $('#captcha').textbox({
            prompt: '请输入验证码',
            required: true,
            buttonText:'<img alt="测试验证" height="40px" src="${ctxPath}/captcha/image.html?ctoken=${ctoken}&t=">',
            missingMessage: "请输入验证码"
        })

        $('.submit').linkbutton({});

        /*验证码tooltip*/
    })

    function login() {
        $('#form').form('submit',{
            url: "${ctxPath}/login/login.html",
            onSubmit: function () {
                var res = $(this).form('enableValidation').form('validate');
                res ? $.messager.progress() : "";
                return res;
            }
            ,
            success: function (data) {
                console.log(data);
                $.messager.progress('close');
                try {
                    var data = eval('(' + data + ')');
                    if (!data.success) {
                        $.messager.alert('提示', data.message, 'error', function () {
                            $('#username,#password').textbox('clear');
                        });
                    } else {
                        window.location.reload();
                    }
                }
                catch (e) {
                    $.insdep.error(data);
                }

            }
        });
    }
</script>


</body>
</html>
